<template>
  <section>
    <el-row class="area_info" type="flex">
      <!-- 地区信息 -->
      <el-col :span="14">
        <!-- 区域、 -->
        <el-row type="flex" class="area">
          <el-col :span="3">区域：</el-col>
          <el-col v-if="!$route.query.city" :span="24">未选择任何地区</el-col>
          <el-col v-else :span="24">
            <div v-if="cityInfo.scenics.length > 0 " :class="showAllArea ? '' : 'scenics_box'">
              <span
                class="location_budget"
                v-for="item in cityInfo.scenics"
                :key="item.id"
              >{{item.name}}</span>
            </div>

            <!-- 折叠展开 -->
            <a href="#" @click.prevent="showAllArea = !showAllArea">
              <i class="el-icon-d-arrow-right"></i>
              等{{cityInfo.scenics.length}}个区域
            </a>
          </el-col>
        </el-row>

        <el-row class="price-row" type="flex" align="middle">
          <el-col :span="3">
            均价
            <el-tooltip effect="dark" content="等级均价由平日价格计算得出，节假日价格会有上浮。" placement="top-start">
              <!-- 包含在 <sup> 标签和其结束标签 </sup> 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。 -->
              <sup class="question_mark">?</sup>
            </el-tooltip>
            <span>:</span>
          </el-col>
          <el-col :span="24">
            <el-row type="flex">
              <el-col :span="6">
                <el-tooltip
                  :visible-arrow="false"
                  effect="dark"
                  content="等级评定是针对房价，设施和服务等各方面水平的综合评估"
                  placement="bottom-start"
                >
                  <div>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <span class="price_budget">&yen;332</span>
                  </div>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  :visible-arrow="false"
                  effect="dark"
                  content="等级评定是针对房价，设施和服务等各方面水平的综合评估"
                  placement="bottom-start"
                >
                  <div>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <span class="price_budget">&yen;521</span>
                  </div>
                </el-tooltip>
              </el-col>
              <el-col :span="6">
                <el-tooltip
                  :visible-arrow="false"
                  effect="dark"
                  content="等级评定是针对房价，设施和服务等各方面水平的综合评估"
                  placement="bottom-start"
                >
                  <div>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <i class="iconfont iconhuangguan"></i>
                    <span class="price_budget">&yen;768</span>
                  </div>
                </el-tooltip>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-col>

      <!-- 地图容器 -->
      <el-col :span="10">
        <div class="map_box" id="container"></div>
      </el-col>
    </el-row>
  </section>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data() {
    return {
      // 城市信息
      cityInfo: {
        scenics: []
      },
      // 是否显示所有区域
      showAllArea: false,
      // 地图对象
      map: '',
      // 点标记数组
      markerList: [],
      mapOption: {}
    }
  },

  props: ['data'],

  methods: {
    // 使用IP定位插件获取本地城市
    getLocalCity() {
      AMap.plugin('AMap.CitySearch', () => {
        var citySearch = new AMap.CitySearch()
        citySearch.getLocalCity(async (status, result) => {
          if (status === 'complete' && result.info === 'OK') {
            // 查询成功，result即为当前所在城市信息
            let locationCity = result.city
            if (this.city === locationCity) return

            // 本地存储的城市与当前城市不一致，弹框切换
            const res = await this.$confirm('定位当前城市：' + locationCity, '提示', {
              confirmButtonText: '确定',
              type: 'success',
              showCancelButton: false
            }).catch(err => err)
            if (res === 'confirm') {
              this.$router.push('/hotel?city=' + locationCity)
              setTimeout(() => {
                this.$store.commit('hotel/saveCity', locationCity)
              }, 50)
            }
          }
        })
      })
    },

    // 使用点标记
    getMarker() {
      if (this.markerList.length > 0) {
        // 清空点标记
        this.map.remove(this.markerList)
        this.markerList = []
      }
      // console.log(this.data);
      this.data.forEach((item, index) => {
        let content = `<div class="mapImg">
                        <img src="https://webapi.amap.com/theme/v1.3/markers/n/mark_bs.png" alt />
                        <span>${index + 1}</span>
                      </div>`
        let marker = new AMap.Marker({
          position: new AMap.LngLat(item.location.longitude, item.location.latitude),
          title: item.name,
          content: content
        })
        this.markerList.push(marker)
      })
      this.map.add(this.markerList)
    },

    // 获取当前城市信息
    async getCityInfo() {
      const { data } = await this.$axios.get('/cities', {
        params: {
          name: this.city
        }
      })
      // console.log(data);
      this.cityInfo = data.data[0]
    }
  },

  computed: {
    ...mapState({
      city(state) {
        return state.hotel.city
      }
    })
  },

  mounted() {
    this.map = new AMap.Map('container');
    // 通过首页城市酒店搜索进入的不需要定位
    if (!this.$route.query.city) {
      this.getLocalCity()
    }
    this.getMarker()
  },

  watch: {
    // 监听当前城市变化
    city: {
      handler() {
        if (this.city === '') return this.cityInfo = { scenics: [] }
        this.getCityInfo()
      },
      immediate: true
    },

    // 监听酒店列表数据，渲染点标记
    data() {
      if (this.map && this.data.length > 0) {
        this.mapOption = {
          center: [this.data[0].location.longitude, this.data[0].location.latitude],
          zoom: 15
        }
        this.map = new AMap.Map('container', this.mapOption)
        this.getMarker()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.area_info {
  min-height: 260px;
  margin-bottom: 20px;

  .area {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;

    .scenics_box {
      max-height: 3em;
      overflow: hidden;
    }

    .location_budget {
      margin-right: 1em;
      padding: 0 2px;
      display: inline-block;
    }

    .el-icon-d-arrow-right {
      color: orange;
      transform: rotate(90deg);
    }
  }

  .price-row {
    margin-bottom: 20px;
    color: #666;
    font-size: 14px;

    .question_mark {
      background-color: #ccc;
      color: #fff;
      display: inline-block;
      width: 1.2em;
      height: 1.2em;
      text-align: center;
      border-radius: 100%;
    }

    .iconhuangguan {
      float: left;
      color: #f90;
    }

    .price_budget {
      margin-left: 0.5em;
    }
  }
}

.map_box {
  width: 420px;
  height: 260px;
}

/deep/.mapImg {
  position: relative;

  height: 30px;
  img {
    width: 27px;
    object-fit: cover;
  }

  span {
    position: absolute;
    top: -4px;
    left: 3px;
    width: 20px;
    height: 30px;
    text-align: center;
    line-height: 34px;
    color: #fff;
    font-size: 12px;
  }
}
</style>